<template>
  <div
    :class="{ 'ssleft': props.position === 'left', 'ssright': props.position === 'right', 'ssfirends': props.position === 'firends' }"
    @click="ss">
    <span></span>
  </div>
</template>

<script setup>
const props = defineProps({
  position: {
    type: String
  }
})
const emit = defineEmits(['ss'])
const ss = () => {
  emit('ss')
}
</script>

<style lang="scss" scoped>
// 搜索图标
.ssright,
.ssleft,
.ssfirends {
  position: absolute;
  right: 0;
  top: 0;
  margin-right: 25px;
  margin-top: 25px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 3px solid #fff;
  z-index: 5;

  span {
    position: absolute;
    right: 0;
    top: 0;
    margin-right: -8px;
    margin-top: 17px;
    width: 10px;
    height: 3px;
    background-color: #fff;
    transform: rotate(50deg);
  }
}

.ssleft {
  width: 10px !important;
  height: 10px !important;
  left: 0;
  width: 10px;
  height: 10px;
  margin-top: 12px;
  margin-left: 10px;

  span {
    margin-top: 13px;
  }
}

.ssfirends {
  left: 0;
  width: 10px;
  height: 10px;
  border: 2px solid #fff;
  margin-top: -22px;
  margin-left: -3px;

  span {
    width: 10px;
    height: 2px;
    margin-top: 12px;
    margin-right: -5px;
  }
}
</style>